<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>发布文章 - 美食分享社区</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/post-create.css">
    <!-- 引入 wangEditor -->
    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css">
</head>

<body>
    <div class="post-create-container">
        <h2 class="post-create-title">发布文章</h2>
        <form th:action="@{/posts/create}" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="title">文章标题</label>
                <input type="text" class="form-control" id="title" name="title" required placeholder="请输入文章标题（2-50字）">
            </div>

            <div class="form-group">
                <label for="content">文章内容</label>
                <div id="editor-toolbar" style="border: 1px solid #ccc;"></div>
                <div id="editor-container" style="border: 1px solid #ccc; border-top: none;"></div>
                <textarea id="content" name="content" style="display: none;"></textarea>
            </div>

            <div class="form-group">
                <label for="categoryId">文章分类</label>
                <select id="categoryId" name="categoryId" class="form-control" required>
                    <option value="">请选择分类</option>
                    <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.name}">
                    </option>
                </select>
            </div>

            <div class="form-group">
                <label>文章标签</label>
                <div class="tags-container">
                    <div th:each="tag : ${tags}" class="tag-item">
                        <input type="checkbox" name="tagIds" th:value="${tag.id}" th:id="'tag-' + ${tag.id}">
                        <label th:for="'tag-' + ${tag.id}" th:text="${tag.name}"></label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="imageFiles">上传图片</label>
                <input type="file" class="form-control" id="imageFiles" name="imageFiles" multiple accept="image/*">
                <div id="imagePreview" class="image-preview"></div>
            </div>

            <div class="form-group">
                <label for="videoUrl">视频链接</label>
                <input type="url" class="form-control" id="videoUrl" name="videoUrl" placeholder="请输入视频链接（选填）">
            </div>

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="isOriginal" value="1" checked>
                    <span>原创文章</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="isTop" value="1">
                    <span>置顶文章</span>
                </label>
            </div>

            <button type="submit" class="btn-submit">发布文章</button>
        </form>
    </div>

    <script>
        // 创建编辑器
        const { createEditor, createToolbar } = window.wangEditor;

        const editorConfig = {
            placeholder: '请输入内容...',
            onChange(editor) {
                const html = editor.getHtml();
                document.getElementById('content').value = html;
            }
        }

        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default'
        });

        const toolbarConfig = {};

        const toolbar = createToolbar({
            editor,
            selector: '#editor-toolbar',
            config: toolbarConfig,
            mode: 'default'
        });

        // 图片预览
        document.getElementById('imageFiles').addEventListener('change', function (e) {
            const preview = document.getElementById('imagePreview');
            preview.innerHTML = '';

            for (const file of this.files) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.className = 'preview-image';
                    preview.appendChild(img);
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>

</html>